<template>
  <view class="dev-svg-box"
    :style="[{ 'width':width==='100%'?'100%':width+'rpx','border-radius':`${radius}rpx`,'height':height+'rpx','background-color':openDebug?'#007AFF':''},pictureStyle,{'display':'flex'}]">
    <image mode="scaleToFill" :src="displayAddress"
      :style="[{ 'width':width==='100%'?'100%':width+'rpx','height':height+'rpx','border-radius':`${radius}rpx`},pictureStyle]">
    </image>
    <!-- 数字 -->
    <view
      :style="{'width':numWidth+'rpx','height':numHeight+'rpx','line-height':`${numHeight}rpx`,'border-radius':`${numRadius}rpx`,'font-size':`${fontSize}rpx`,'color':numColor,'background':numBgColor,'top':numTop===''?'none':numTop+'rpx','left':numLeft===''?'none':numLeft+'rpx','right':numRight===''?'none':numRight+'rpx','bottom':numBottom===''?'none':numBottom+'rpx'}"
      class="dev-number" v-if="isNum">
      <slot name="custom">
        {{checkDigit}}
      </slot>
    </view>
  </view>
</template>

<script>
  /******************************************* 娄渊洋
   * 列表布局
   * @property {String} 'mode' 当前使用什么模式 svg image
   * @property {String} 'svg-code' svg代码
   * @property {String} 'initial-color' svg代码初始颜色 不传值则默认使用 代码颜色,如需修改颜色,此值为必传值
   * @property {String} 'modify-color' 修改后的颜色
   * @property {String,Number} 'width' 图片宽度 默认宽度为40rpx
   * @property {String,Number} 'height' 图片高度 默认高度为40rpx
   * @property {String} 'image-url' 不使用svg的情况下,自定义图片地址
   * @property {Object} 'picture-style' 不使用svg的情况下,自定义图片样式
   * @property {String} 'svg-name' 当为svg模式时可直接使用以封存的svg
   * @property {Boolean} 'open-debug' 是否打开调试 打开调试出现背景颜色
   * @property {Boolean} 'is-num' 是否显示消息数
   * @property {String,Number} 'max-num' 消息数字最大值
   * @property {String,Number} 'number' 消息数字值
   * @property {String,Number} 'num-width' 消息框宽度
   * @property {String,Number} 'num-height' 消息框高度
   * @property {String,Number} 'num-radius' 消息框圆角
   * @property {String,Number} 'font-size' 消息文字大小
   * @property {String} 'num-color' 消息文字颜色
   * @property {String} 'num-bg-color' 消息框背景颜色
   * @property {String,Number} 'num-top' 消息框距离图片顶部距离
   * @property {String,Number} 'num-right' 消息框距离图片右边距离
   * @property {String,Number} 'num-left' 消息框距离图片左边距离
   * @property {String,Number} 'num-bottom' 消息框距离图片底部距离
   * @property {String} 'default-img-url' 图片默认域名地址
   */
  import svgData from './svg.js'
  import base64 from './base64.js'
  export default {
    name: "dev-svg-image",
    props: {
      //svg代码
      svgCode: {
        type: String,
        default: ''
      },
      //初始颜色
      initialColor: {
        type: String,
        default: ''
      },
      //圆角
      radius: {
        type: [String, Number],
        default: 0
      },
      //修改后颜色
      modifyColor: {
        type: String,
        default: ''
      },
      //图片的高度
      width: {
        type: [String, Number],
        default: '40'
      },
      //图片的高度
      height: {
        type: [String, Number],
        default: '40'
      },
      //image地址
      imageUrl: {
        type: [String,null],
        default: ''
      },
      //自定义图片的样式
      pictureStyle: {
        type: Object,
        default () {
          return {

          };
        }
      },
      //当前使用 svg 模式还是 image 模式
      mode: {
        type: String,
        default: 'svg' //svg  image
      },
      //使用已经 封装的svg 图片 名称
      svgName: {
        type: String,
        default: 'rightArrow' //rightArrow
      },
      //是否打开调试
      openDebug: {
        type: Boolean,
        default: false
      },
      //是否显示消息数
      isNum: {
        type: Boolean,
        default: false
      },
      //消息数字值
      number: {
        type: [String, Number],
        default: 0
      },
      //消息数字最大值
      maxNum: {
        type: [String, Number],
        default: 99
      },
      //消息框宽度
      numWidth: {
        type: [String, Number],
        default: 36
      },
      //消息框高度
      numHeight: {
        type: [String, Number],
        default: 36
      },
      //消息框圆角
      numRadius: {
        type: [String, Number],
        default: 18
      },
      //消息文字大小
      fontSize: {
        type: [String, Number],
        default: 12
      },
      //消息文字颜色
      numColor: {
        type: String,
        default: '#FFFFFF'
      },
      //消息框背景颜色
      numBgColor: {
        type: String,
        default: '#FF333A'
      },
      //消息框距离顶部距离
      numTop: {
        type: [String, Number],
        default: -10
      },
      //消息框距离右边距离
      numRight: {
        type: [String, Number],
        default: -12
      },
      //消息框距离左边距离
      numLeft: {
        type: [String, Number],
        default: ''
      },
      //消息框距离底部距离
      numBottom: {
        type: [String, Number],
        default: ''
      },
      //图片默认地址头
      defaultImgUrl:{
        type: String,
        default: 'http://static.bsyjk.cn/'
      }

    },
    data() {
      return {

      };
    },
    computed: {
      //计算数字
      checkDigit() {
        if (this.number > this.maxNum) {
          return `${this.maxNum}+`
        } else {
          return this.number
        }
      },
      // 计算url数据
      displayAddress: function() {
        let _this = this;
        if (this.mode == 'svg') {
          if (this.svgName) {
            if (_this.modifyColor) {
              let regulars = new RegExp(svgData[this.svgName].initialColor, 'g');
              return 'data:image/svg+xml;base64,' + base64.encode(svgData[this.svgName].svgCode.replace(
                regulars, this
                .modifyColor))
            } else {
              return 'data:image/svg+xml;base64,' + base64.encode(svgData[this.svgName].svgCode);
            }
          } else {
            if (this.svgCode) {
              if (this.initialColor && this.modifyColor) {
                let regulars = new RegExp(this.initialColor, 'g');
                return 'data:image/svg+xml;base64,' + base64.encode(this.svgCode.replace(regulars, this
                  .modifyColor))
              } else {
                return 'data:image/svg+xml;base64,' + base64.encode(this.svgCode);
              }
            }
          }
        } else {
          return this.imgUrl(this.imageUrl)
        }

      }
    },
    methods: {
      //计算url地址
      imgUrl(src) {
        src = src || ''
        return src.indexOf('http://') != -1 || src.indexOf('https://') != -1 ?
          src :
          this.defaultImgUrl + src;
      },
    }
  }
</script>

<style lang="scss">
  .dev-svg-box {
    position: relative;

    .dev-number {
      position: absolute;
      text-align: center;
    }
  }
</style>
